<template>
  <div>
    <div class="comment">
      <div class="user">
        <div class="avatar">
          <img
            v-lazy="$axios.defaults.baseURL + commentData.account.defaultAvatar"
            alt=""
          />
        </div>
        <div class="userinfo">
          <div class="name">
            {{ commentData.account.nickname }} <span class="lv">LV8</span>
          </div>
          <span class="date">{{ commentDate }}</span>
        </div>
      </div>
      <div class="comment_cont" :class="{ focus: isFocus }">
        <p>{{ commentData.content }}</p>
        <el-input
          @focus="changeInput(true)"
          @blur="changeInput(false)"
          placeholder="添加回复"
          v-model="replyContent"
          type="textarea"
          resize="none"
          clearable
        >
        </el-input>
        <div class="btn" v-show="isReply">
          <el-button type="primary" size="small" @click="handelReply"
            >回复</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: ["commentData"],
  data() {
    return {
      replyContent: "",
      isFocus: false,
      isReply: false,
      dialogVisible: false,
    };
  },
  computed: {
    commentDate() {
      let date = moment(this.commentData.update_at).format("YYYY-MM-DD");
      return date + "评价";
    },
  },
  methods: {
    changeInput(bl) {
      this.isFocus = bl;
      if (this.isFocus) {
        this.isReply = true;
      }
    },
    handelReply() {
      this.isReply = false;
      this.$message.error("暂无回复功能");
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  // display: flex;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}
.user {
  padding-right: 20px;
  display: flex;
  align-items: flex-end;
  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 20px;
    img {
      width: 100%;
      object-fit: cover;
    }
  }
  .name {
    .lv {
      font-size: 14px;
      color: orangered;
    }
  }
  .date {
    font-size: 14px;
    color: #888;
  }
}
// 评论部分
.comment_cont {
  p {
    margin: 10px 0;
    font-size: 14px;
    color: #333;
    // overflow: hidden;
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 2;
    // line-clamp: 2;
    // overflow: hidden;
  }

  .btn {
    margin: 10px;
    text-align: right;
  }
  /deep/.el-textarea__inner {
    transition: all 0.3s;
    height: 33px;
  }
}
.focus {
  /deep/.el-textarea__inner {
    height: 70px;
  }
}
</style>